<template>
  <div class="page-webview-container">
    <!-- 查看外链页面 -->
    <iframe :src="$router.currentRoute.query.url" frameborder="0" class="webview" />
    <div v-show="colse" class="container-tip">
      <div class="item-btn-close" @click="colse = false">关闭提示</div>
      <div class="go-href" @click="goHref">如果长时间为显示案例<br>可能需微信授权获取用户信息<br>点击跳转至授权页面 <br> 或下方扫二维码进入该案例</div>
      <div class="code" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colse: true
    }
  },
  mounted() {
    const mivaUrl = this.$router.currentRoute.query.url
    // 把链接转换为二维码
    jQuery('.code').qrcode({
      width: 100,
      height: 100,
      render: 'canvas', // 设置渲染方式 table canvas
      typeNumber: -1, // 计算模式
      correctLevel: 0, // 纠错等级
      background: '#ffffff', // 背景颜色
      foreground: '#000000', // 前景颜色
      text: mivaUrl // 链接
    })
  },
  methods: {
    goHref() {
      window.location.href = `${this.$router.currentRoute.query.url}?${Math.random()}`
    }
  }
}
</script>

<style lang="scss" scoped>
.page-webview-container {
  .webview {
    width: 100%;
    height: calc(100vh);
    position: relative;
    z-index: 999;
  }
  .go-href {
    width: 60%;
    // position: fixed !important;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, 20%);
    margin: auto;
    white-space: normal;
  }
  .item-btn-close {
    text-align: right;
    padding: 30px;
    padding-right: 20%;
  }
  .code {
    img{
      pointer-events: initial;
    }
  }
  .container-tip {
    width: 100%;
    padding: 30px 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 748943649;
    text-align: center;
    background-color: rgba($color: #000000, $alpha: .7);
    color: #fff;
  }
}
</style>
